import { Table, Tag, Button, message } from 'antd';
import React, { useEffect, useState } from 'react';
import { adminList } from "../../http/request";
import { deleteAdmin } from "../../http/request";
import { PlusCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import store from "../../store";
const adminRole = (role) => {
    let tag
    switch (role) {
        case 1:
            tag = <Tag color={"#FF0000"} >超管</Tag>
            break;
        case 2:
            tag = <Tag color={"#2C99D7"} >管理员</Tag>
            break;
        case 3:
            tag = <Tag color={"#D9AFD9"} >员工</Tag>
            break;

    }
    return tag
}
const App = () => {
    const Navigate = useNavigate()

    const [data, setData] = useState([])
    useEffect(() => {
        adminList().then(res => {
            // console.log(res.data.data);
            setData(() => {
                return res.data.data
            })
        })
    }, [])
    //删除管理员信息
    const deleteAdminList = (id) => {
        // console.log(id);
        deleteAdmin({ adminid: id }).then(res => {
            const { code } = res.data
            if (code == "200") {
                message.success("删除成功")
                window.location.reload()

            } else {
                message.error("删除失败")
            }
        })
    }
    //添加或修改管理信息
    const addAdminList = (value) => {
        store.dispatch({
            type: "types",
            data: value
        })
        Navigate("/account/add")
    }
    //展示规则
    const columns = [
        {
            title: "序号",
            render: (text, item, index) => <span>{index + 1}</span>
        },
        {
            title: "账号",
            dataIndex: "adminname"
        },
        {
            title: "权限",
            dataIndex: "role",
            render: (text) => {
                return (
                    adminRole(text)
                )
            }
        },
        {
            title: "操作",
            render: (text, item) => (
                <div>
                    <Button type="dashed" size="small" style={{ marginRight: "5px" }} onClick={() => addAdminList("修改")}>edit</Button>
                    <Button type="primary" danger size="small" onClick={() => deleteAdminList(item.adminid)}>delete</Button>
                </div>
            )
        }
    ]
    return (
        <div>
            <Button type="primary" shape="round" icon={<PlusCircleOutlined />} size={'default'} style={{ marginBottom: "10px" }} onClick={() => addAdminList("添加")}>添加</Button>
            <Table columns={columns} dataSource={data} rowKey={record => record.adminid} pagination={{ position: ["bottomCenter"], pageSize: 8 }} />
        </div>)
}

export default App;